<template>

	<view class="" style="height: 100%;position: relative;min-height: 100vh;padding-bottom: 50px;">
				<u-skeleton :loading="isLoading" rows="15">
		<view class="top" style="text-align: center; border-bottom: none;">
			【{{data.name}}】解析
		</view>
		<view class="top">

			<view class="" style="margin-top: 10rpx;">
				<view class="title-type">
					<view class="floatleft" style="margin-left:20rpx">
						<view class="y_tag y_tag_bgPrimary" style="margin-top: 10rpx;">
							{{dindex+1}}.单选题
						</view>
					</view>

					<view class="floatright" style="margin-right: 10rpx;">
						<view class="y_tag y_tag_bgWarning" style="margin-top: 10rpx;">
							{{data.data[dindex].labels}}
						</view>
					</view>
				</view>
			</view>

		</view>

		<view style="height: 10rpx; background-color: rgb(249, 249, 249);">
		</view>


		<view class="allContent" :animation="animation" v-if="data.data">

			<view class="content">
				<view class="title-content">
					<rich-text :nodes="data.data[dindex].content"></rich-text>
				</view>

			</view>

			<view style="width: 100%;" v-for="(item,i) in data.data[dindex].options" :key="item.id">
				<view class="options"
					:class="[item.id==data.data[dindex].answer?'isError':'',item.isRight==1?'selectOptions':'']">
					{{check[i]}}. {{item.content}}
				</view>

			</view>
			<u-divider />


			<view style="display: flex;">
				<view class="prev">
					<u-button @click="prev" :disabled='dindex<=0' type="warning">上一题</u-button>
				</view>

				<view class="next">
					<u-button @click="next" :disabled='data.data.length-1==dindex' type="primary">下一题</u-button>
				</view>
			</view>

			<!-- 在阴影内 -->


		<!-- </view> -->


		<view class="answers">
			<view class="answer">正确答案
			</view>
			<view class="answer">你的答案
			</view>
			<view class="answer">答题数
			</view>
			<view class="answer">正确率
			</view>
		</view>


		<view class="answers" style="margin-top: 10rpx; !important">
			<view class="answer green">
				{{data.data[dindex].okAnswer}}
			</view>
			<view class="answer" :class="[data.data[dindex].youAnswer==data.data[dindex].okAnswer?'green':'red']">
				{{data.data[dindex].youAnswer==""?"无":data.data[dindex].youAnswer}}
			</view>
			<view class="answer" :class="[data.answerCount==data.data.length?'green':'red']">{{data.answerCount}}
			</view>

			<view class="answer" style="color: rgb(69, 190, 135) ;" v-if="data.accuracy>=60">{{data.accuracy}}% </view>
			<view class="answer" style="color: red;" v-if="data.accuracy<60">{{data.accuracy}}% </view>
		</view>


		<view class="errorperson">
			本题回答错误人员有{{data.data[dindex].errorPersonCount}}人)：{{data.data[dindex].errorList}}
		</view>


		<u-divider text="分割线" textColor="#2684d6" lineColor="#2684d6"></u-divider>


		<view class="">
			<view class="errorperson" v-if="data.data[dindex].analysis==''||data.data[dindex].analysis==null"
				style="background-color: rgb(236, 249, 255); color:blue;">
				暂无解析
			</view>


			<view class="errorperson" v-else style="background-color: rgb(236, 249, 255); color:blue;">
				{{data.data[dindex].analysis}}
			</view>
		</view>
		
		
		
		
	<!-- 	<view class="footers">
		     <view class="mylove">
		        <div  class="icon iconfont icon-shoucang">
		        <text style="padding-left: 10rpx; font-size: 30rpx;">收藏</text> </div>
		     </view>
		     <view class="mylove">
		      <div class="icon iconfont icon--_kucunshuliangtongji">
		      <text style="padding-left: 10rpx; font-size: 30rpx;">共{{data.data.length}}题</text>
			  </div>
		     </view>
		  </view> -->
</view>
			<view class="" style="position: absolute;bottom: 0px;" v-if="data.data">
				<view class="footers">
					<!-- <view class="mylove">
						<div class="icon iconfont icon-shoucang">
							<text style="padding-left: 10rpx; font-size: 30rpx;">收藏</text>
						</div>
					</view> -->
					
					<view class="mylove" @click="addlikes(data.data[dindex])" v-if="data.data[dindex].isLike==null">
						<div class="icon iconfont icon-shoucang" style="border-right: 1px solid #eee;" v-if="data.data[dindex].isLike==null">
							<text style="padding-left: 10rpx; font-size: 30rpx;">收藏</text>
						</div>
					</view>
					
					<view class="mylove" @click="deleteLikes(data.data[dindex])" v-if="data.data[dindex].isLike!=null">
						<div class="icon iconfont icon-shoucang" style="color: rgb(227,157,143);" v-if="data.data[dindex].isLike!=null">
							<text style="padding-left: 10rpx; font-size: 30rpx;color: black;">取消</text>
						</div>
					</view>
					
					
					
					<view class="mylove">
						<div class="icon iconfont icon--_kucunshuliangtongji">
							<text style="padding-left: 10rpx; font-size: 30rpx;">共{{data.data.length}}题</text>
						</div>
					</view>
				</view>
			</view>
</u-skeleton>
	</view>
		
</template>

<script>
	import {
		GetAnalysis
	} from '../../../api/exam';
	import {AddLikeQuestion,DeleteLikeQuestion} from "../../../api/brush_questions.js"
	export default {
		data() {
			return {
				id: "",
				data: {},
				dindex: 0,
				check: ["A", "B", "C", "D", "E", "F", "G"],
				okAnswer: "",
				youAnswer: "",
				answerCount: 0,
				isLoading: true,
				animation: null, //动画对象
				jiaodu: 0,
			}
		},
		onShow() {
			this.getResolve();
		},
		onLoad(options) {
			this.id = options.id;
		},
		methods: {
			/**删除收藏
			 * @param {Object} val
			 */
			deleteLikes(val){
				const obj=val;
				AddLikeQuestion({id:obj.id}).then(res=>{
					if(res.result===0){
						uni.showToast({
							icon:"none",
							title:"操作成功"
						})
						this.data.data.map(d=>{
							if(d.id==obj.id){
								d.isLike=null;
							}
						})
						console.log(this.data.data);
					}else{
						uni.showToast({
							icon:"none",
							title:res.message
						})
					}
				})
			},
			/**
			 * 添加收藏
			 */
			addlikes(val){
				console.log(val,"mdsknflsdml");
				const obj=val;
				AddLikeQuestion({id:obj.id}).then(res=>{
					if(res.result===0){
						uni.showToast({
							icon:"none",
							title:"操作成功"
						})
						this.data.data.map(d=>{
							if(d.id==obj.id){
								d.isLike=1;
							}
						})
						console.log(this.data.data);
					}else{
						uni.showToast({
							icon:"none",
							title:res.message
						})
					}
				})
			},
			/**
			 * 获取试卷数据
			 */
			getResolve() {
				const {
					id,
					check
				} = this;

				GetAnalysis({
					id: id
				}).then((res) => {
					let okAnswer = []; //正确答案
					let youAnswer = []; //你的答案
					let answerCount = 0; //答题数
					let zqlv = 0;
					if (res.result === 0) {
						//循环每个题目
						res.data.data.map(d => {
							//因为每个题目都有自己的答案 所以这里要清空上个题目的记录
							okAnswer = [];
							youAnswer = [];
							//如果回答过题目 则答题数+1
							if (d.answer != "" && d.answer != null) {
								answerCount += 1;
							}
							//将选择的答案分割成数组
							let answer = d.answer.split(",");
							//每个题目的选项进行循环
							d.options.map((e, i) => {
								//如果是正确答案 则放入正确答案数组
								if (e.isRight == 1) {
									okAnswer.push(check[i]);
								}
								//如果你的答案数组包含当前循环的答案id 则保存你选的答案字母
								if (answer.includes(e.id)) {
									youAnswer.push(check[i]);
								}
								//最后赋值
								if (i == d.options.length - 1) {
									if (okAnswer.join(",") == youAnswer.join(",")) {
										zqlv += 1;
									}
									d.okAnswer = okAnswer.join(",");
									d.youAnswer = youAnswer.join(",");
									d.errorPersonCount = d.errorList.length;
									d.errorList = d.errorList.join(",")
									return;
								}
							});

						})
						res.data.answerCount = answerCount;
						res.data.accuracy = (zqlv / res.data.data.length) * 100;
						this.data = res.data;
						this.isLoading = false;

					}else if(res.result==-1 && this.id!=""){
						uni.showToast({
							icon:"none",
							title:res.message
						})
						setTimeout(()=> {
							uni.reLaunch({
								url:"/pages/exam/exam"
							})
						}, 1000);
					}else{
						uni.reLaunch({
							url:"/pages/index/index"
						});
					}
				})
			},


			/**
			 * 上一题
			 */
			prev() {
				let {
					dindex,
					data
				} = this;

				// index =index- 1;
				// this.setData({
				//   index: index
				// });
				if (dindex <= 0) {
					return
				}

				if (dindex <= data.data.length - 1) {
					//设定动画
					let animation = uni.createAnimation({
						duration: 300,
						delay: 0,
						timingFunction: "linear",
					});

					this.animation = animation;


					setTimeout(() => {
						this.changeQuestion(0);
					}, 50);
					setTimeout(() => {
						this.dindex = dindex - 1;
					}, 350);
				}
			},

			/**
			 * 下一题
			 */
			next() {

				let {
					dindex,
					data
				} = this;
				// if (index >= testpaper.length - 1) {
				//   return
				// }
				// index += 1;
				// this.setData({
				//   index: index
				// });


				if (dindex < data.data.length - 1) {
					//设定动画
					let animation = uni.createAnimation({
						duration: 300,
						delay: 0,
						timingFunction: "linear",
					});

					this.animation = animation;


					setTimeout(() => {
						this.changeQuestion(0);
					}, 50);
					setTimeout(() => {
						this.dindex = dindex + 1;

					}, 350);
				}

			},




			//动画旋转
			//旋转
			changeQuestion: function(action) {
				let {
					animation,
					jiaodu
				} = this;
				//顺时针旋转10度
				if (action == 0) {
					jiaodu += 360;
				} else {
					jiaodu -= 360;
				}
				// animation.rotate3d(jiaodu, jiaodu, jiaodu, jiaodu).step();
				this.animation.scale3d(0.01, 1, 445).step();
				this.animation.scale3d(1, 1, 461).step();

				//输出动画
				this.animation = animation.export();
				this.jiaodu = jiaodu;

			},

			close() {
				this.show = false
			},

			//倒计时改变事件
			onChange(e) {
				this.timeData = e
			},
			/**
			 * 点击开始考试 开始考试
			 */
			start() {
				uni.showLoading({
					title: "请稍后"
				});

				const id = this.id;
				startExam({
					id: id
				}).then((res) => {
					uni.hideLoading();
					if (res.result === 0) {
						let tp = res.data.testpaper;
						tp.map(d => {
							d.isSelected = false;
							d.options.map(e => e.isSelected = false)
						});

						this.testpaper = tp;
						this.code = res.data.code;
						this.timer = res.data.timer;
						this.isStrart = true;



						if (uni.getStorageSync(id) != "") {
							this.testpaper = uni.getStorageSync(id).testpaper;
							this.datika = uni.getStorageSync(id).datika;
						}


						//  if(app.globalData.myExam!=null){
						//   this.setData({
						//     testpaper: app.globalData.myExam.testpaper,
						//     datika:app.globalData.myExam.datika
						//   })
						//   let {testpaper}=this.data
						//   // console.log(testpaper,"JJ");
						//  }


					} else if (res.result === -1) {
						uni.showLoading({
							title: "请稍后....",
						});

						uni.showToast({
							title: '你已经考试完毕啦',
							icon: 'none'
						})
						setTimeout(() => {

							uni.hideLoading();
							uni.navigateTo({
								url: '/pages/exam/result/result?id=' + id
							});
						}, 1500);

					}
				})




			},

		}
	}
</script>

<style scoped lang="scss">
	@import url("/static/main.css");
	@import url("/static/iconfont/icons.css");
	.green{
		color:rgb(7,193,96);
	}
	.red{
		color: red;
	}
	.father{
	  width: 100vw;
	  height: 100%;
	  position: relative;
	}
	.love{
	position: fixed; 
	  bottom: 0px;
	}
	
	.footers{
	  /* border: 1px solid #000; */
	  margin-top: 156rpx;
	  border-top: 1px solid #eee;
	  width: 100vw;
	  display: flex;
	  align-items: center;
	  /* font-weight: 600; */
	}
	
	.mylove{
	  height: 80rpx;
	  line-height: 80rpx;
	  text-align: center;
	  flex: 1;
	}
	
	.mylove:nth-child(1){
	 // border-right: 1px solid #eee;
	}
	.mylove:nth-child(2){
	 // border-left: 1px solid #eee;
	}
	
	
	
	
	
	.errorperson {
		margin-top: 20rpx;
		background-color: rgb(251, 227, 225);
		width: 92%;
		margin-left: 2.1%;
		color: rgb(219, 118, 132);
		font-size: 26rpx;
		padding: 16rpx;
	}

	.answers {
		margin-top: 26rpx;
		width: 100%;
		display: flex
	}

	.answer {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		font-weight: 600;
	}


	.top {
		height: 66rpx;
		line-height: 66rpx;
		border: 1px solid #eee;
		background: #fff;
	}

	.qcount {
		margin-right: 20rpx;
		color: rgb(199, 196, 196);
	}


	.title-type {
		height: 60rpx;
		line-height: 60rpx;
		background-color: #fff;
	}


	.title-content {
		background-color: rgb(241, 241, 241);
		min-height: 100rpx;
		width: 100%;
		border-radius: 8rpx;
		padding-bottom: 10rpx;
		// margin-left: 0.9%;
		// padding: 0 8rpx 8rpx 8rpx;
		margin-top: 10rpx;
		padding: 6rpx;
	}

	.content {
		border: 1px solid #eee;
		padding-bottom: 10rpx;
	}


	.options {
		border: 1px solid #eee;
		width: 90%;
		padding: 2.5%;
		margin-top: 20rpx;
		margin-left: 18rpx;
		// text-align: center;
		border-radius: 12rpx;
	}

	.selectOptions {
		background-color: rgb(25, 137, 250) !important;
		color: #fff !important;
	}

	.isError {
		background-color: red;
		color: #fff !important;
	}

	 .prev{
		 flex: 1;
		 margin-left: 10rpx;
		 margin-right: 5rpx;
	 }
	 
	 .mylove:nth-child(1) {
	 	border-right: 1px solid #eee;
	 }
	 
	
	.next {
		flex: 1;
		margin-right: 10rpx;
		margin-left: 5rpx;
		 // width: 59vw;
		// margin-left: 1%;
		// margin-top: 20rpx;
		margin-top: 0rpx;
	}


	.tan {
		width: 50rpx;
		height: 50rpx;
		margin: 10rpx;
		margin-left: 10rpx;
		line-height: 50rpx;
		text-align: center;
		float: left;
		border: 1px solid #1989fa;
		color: #1989fa;
		border-radius: 10rpx;
	}

	.allContent {
		padding-bottom: 20rpx;
		// border-bottom: 1px solid #eee;
		// box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, .12), 0 0 12rpx rgba(0, 0, 0, .04);
	}




	.time {
		@include flex;
		align-items: center;

		&__custom {
			margin-top: 4px;
			width: 22px;
			height: 22px;
			background-color: $u-primary;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #fff;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			color: $u-primary;
			padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}



	.examing-title {
		margin-top: 20rpx;
		width: 100%;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
	}


	.cell-hover-class {
		background-color: rgb(235, 237, 238);
	}

	/* 或者单是设置透明度 */
	.cell-hover-class {
		opacity: 0.5;
	}
</style>